<template>
	<view class="send_assess">
		<view style="height: 20rpx;"></view>
		<i-card>
			<view class="title">{{pageData.serviceName}}</view>
			<view class="rates">
				<text>产品评分</text>
				<i-rate :rate="formData.star" @change="change" :num="false" size="48rpx" margin="0 12rpx"
					:edit="true"></i-rate>
			</view>
			<view class="texta">
				<textarea v-model="formData.comment" maxlength="200" placeholder-style="color: #A0A0AD"
					placeholder="请填写商品评价（选填）" cols="30" rows="8"></textarea>
				<view class="">{{formData.comment.length}} / 200</view>
			</view>
			<view class="images">
				<text>图片</text>
				<view class="imgList">
					<view class="" v-for="(item, index) in formData.pictures" :key="index">
						<i-upLoad size="160rpx" right="20rpx" v-model="formData.pictures[index]" @success="successList"
							@remove="removeList(index)">
						</i-upLoad>
					</view>
				</view>
			</view>
			<i-buttons radius="4" padding="18rpx 0" size="32" color="#fff" bgColor="#FB652E" @click="submit">发布
			</i-buttons>
		</i-card>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		createGoodsOrderComment
	} from '../../api/order';

	import {
		onLoad,
		onReady,
	} from '@dcloudio/uni-app'
	import {
		navTo,
		showTost
	} from '../../utils/common';

	const pageData = reactive({
		storeName: '',
		serviceName: '',
	})
	const formData = reactive({
		"comment": "",
		"orderId": "",
		"pictures": [''],
		"star": 5
	})

	onLoad((option) => {
		if (option && option.orderId) {
			pageData.serviceName = option.serviceName
			pageData.storeName = option.storeName
			formData.orderId = option.orderId
		}
	})

	onReady(() => {
		uni.setNavigationBarTitle({
			title: pageData.storeName
		})
	})

	const change = (num : number) => {

		formData.star = num
	}

	const submit = async () => {
		formData.pictures = formData.pictures.filter((item) => item)
		await createGoodsOrderComment(formData)
		showTost('评价提交成功，待审核', () => {
			navTo('', 'navigateBack')
		})
	}
	const successList = () => {
		if (formData.pictures.length < 9 && !(formData.pictures.some((item : string) => !item)))
			formData.pictures.push('')
	}

	const removeList = (index : number) => {
		if (formData.pictures.length > 1) {
			formData.pictures.splice(index, 1)
		}
	}
</script>

<style lang="scss" scoped>
	.send_assess {
		width: 100%;
		min-height: 100vh;
		background: $backColor;

		.title {
			max-width: 92%;
			@include dfont;
			font-weight: bold;
			@include warp;
			margin-bottom: 40rpx;
		}

		.rates {
			@include flexR;
			margin-bottom: 40rpx;

			text {
				@include dfont(26rpx);
				margin-right: 40rpx;
				white-space: nowrap;
			}
		}

		.texta {
			background: $background-color;
			border-radius: 8rpx;
			padding: 24rpx;
			margin-bottom: 40rpx;

			view {
				text-align: right;
				@include dfont(24rpx);
				color: #A0A0AD;
			}
		}

		.images {
			@include flexC;
			margin-bottom: 40rpx;

			text {
				@include dfont(26rpx);
				margin-bottom: 32rpx;
			}

			.imgList {
				@include flexR;
				flex-wrap: wrap;
			}
		}
	}
</style>